<template>
  <uni-popup
    type="bottom"
    class="select-stage-popup"
    ref="popup"
    :mask-click="false"
  >
    <view class="header f jc-sb">
      <text>选择服务点自寄</text>
      <uni-icons type="close" size="30" @click="closePopup"></uni-icons>
    </view>
    <view class="body f f1 fd-row">
      <scroll-view scroll-y="true" class="scroll-y">
        <view class="f1">
          <template v-if="loading">
            <loading />
          </template>
          <template v-else-if="!loading && listData.length >= 1">
            <view
              class="stage-card f jc-sb ai-c"
              v-for="(item, index) in listData"
              :key="item.address"
              @click="stageCardClick(index)"
            >
              <image
                src="/static/image/profile/stage_small.png"
                mode="widthFix"
                style="width: 140rpx"
              ></image>
              <view
                class="f f1 fd-col ai-fs jc-c h100p w0"
                style="padding: 20rpx; box-sizing: border-box"
              >
                <view class="header f fd-col w100p"
                  ><text class="fw-600 to-1">{{ item.stageName }}</text></view
                >
                <view class="body w100p f fd-col">
                  <text
                    style="width: 100%; color: #999; font-size: 20rpx"
                    class="to-2"
                    >{{ item.address }}</text
                  >
                  <view class="f ai-c" style="margin-top: 10rpx">
                    <image
                      src="/static/image/mail/time.png"
                      mode="widthFix"
                      style="width: 40rpx"
                    ></image>
                    <text style="font-size: 20rpx; margin: 0 20rpx"
                      >08:00——22:00</text
                    >
                    <view
                      ><text
                        style="
                          font-size: 20rpx;
                          margin-right: 20rpx;
                          color: #24adf3;
                          border: 4rpx solid #24adf3;
                          border-radius: 10rpx;
                          padding: 5rpx;
                          box-sizing: border-box;
                        "
                        >免费包装</text
                      ></view
                    >
                    <view
                      ><text
                        style="
                          font-size: 20rpx;
                          color: #24adf3;
                          border: 4rpx solid #24adf3;
                          border-radius: 10rpx;
                          padding: 5rpx;
                          box-sizing: border-box;
                        "
                        >随到随寄</text
                      ></view
                    >
                  </view>
                </view>
                <uni-icons
                  :type="
                    index === stageCardIndex ? 'checkbox-filled' : 'checkbox'
                  "
                  size="30"
                  style="position: absolute; right: 0; top: 0; color: #24adf3"
                ></uni-icons>
              </view>
            </view>
          </template>
          <template v-else-if="!loading && listData.length === 0 && success"
            ><loading-empty
              tip="没有驿站可以选择,快去创建吧~"
              buttonText="创建驿站"
              url="/pages/profile/stageSetting/stage-new-built"
            />
          </template>
          <template v-else-if="!loading && listData.length === 0 && !success"
            ><loading-error />
          </template>
          <scroll-view-holder />
        </view>
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script>
import { ref } from "vue";
import profileAPI from "/api/modules/profile";
import storageOperation from "/utils/index";
export default {
  name: "select-stage-popup",
  emits: ["getSelectStage"],
  setup(prop, { emit }) {
    const popup = ref(null);
    const loading = ref(false);
    const success = ref(true);
    const userName = storageOperation.getStorageSync("userName").value;
    const listData = ref([]);
    const stageCardIndex = ref(0);
    const stageCardClick = (index) => {
      stageCardIndex.value = index;
    };
    const openPopup = () => {
      popup.value.open();
      //加载快递点
      success.value = true;
      loading.value = true;
      listData.value = [];
      profileAPI
        .getStage({ userName })
        .then((res) => {
          listData.value = res;
        })
        .catch((err) => {
          success.value = false;
          console.log(err);
        })
        .finally(() => {
          loading.value = false;
        });
    };
    const closePopup = () => {
      emit(
        "getSelectStage",
        listData.value.length > 0
          ? listData.value[stageCardIndex.value].stageName
          : ""
      );
      popup.value.close();
    };
    return {
      popup,
      loading,
      success,
      listData,
      stageCardIndex,
      stageCardClick,
      openPopup,
      closePopup,
    };
  },
};
</script>
<style lang='scss' scoped>
.select-stage-popup {
  width: 100%;
  ::v-deep uni-view[name="content"] {
    display: flex;
    flex-direction: column;
    padding: 40rpx;
    padding-bottom: 96rpx !important;
    width: 100%;
    height: 800rpx;
    box-sizing: border-box;
    background: #fff !important;
    border-radius: 40rpx 40rpx 0 0;
    .uni-popup__wrapper.bottom {
      display: flex;
      flex: 1;
      flex-direction: column;
    }
  }
  .body {
    margin-top: 40rpx;
    .scroll-y {
      width: 100%;
      .stage-card {
        position: relative;
        margin-bottom: 20rpx;
        width: 99%;
        height: 180rpx;
        border: 1px solid #ccc;
        border-radius: 20rpx;
        .body {
          margin-top: 10rpx;
        }
      }
      ::v-deep .uni-scroll-view-content {
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>